<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/js/vue.js" type="text/javascript" charset="utf-8"></script>


</head>
<body>
<div id="app">
    <!--<input type="text" v-model="firstname" @keyup="getlastname">+-->
    <!--<input type="text" v-model="secondname" @keyup="getlastname">=-->
    <!--<input type="text" v-model="lastname">-->

    <input type="text" v-model="firstname">+
    <input type="text" v-model="secondname">=
    <input type="text" v-model="lastname">


</div>
<script>
    // 创建一个vue实例
    new Vue({
        el:'#app',
        data:{
            firstname:'',
            secondname:'',
        },
        methods:{
        },
        // 使用watch可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的function处理函数
//        watch: {
//            'firstname':function (newVal,oldVal) {
//                this.lastname = newVal + this.secondname
//            },
//            'secondname':function (newVal) {
//                this.lastname = this.firstname + newVal
//
//            }
//
//        }
        computed:{
            'lastname':function () {
                // 只要是内部依赖的发生变化  就会重新对计算属性求值
                return this.lastname = this.firstname +this.secondname
            }
        }

    })
</script>
</body>
</html>
